<template>
	<view class="page" :style="themeColor">
		<view class="flex benben-position-layout flex flex-wrap align-center platformMessage_flex_0"
			:style="{height:(64+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between flex-sub platformMessage_fd0_0'>
				<view class='flex flex-wrap align-center platformMessage_fd0_0_c0' @tap.stop="openModel">
					<text class='fu-iconfont2  platformMessage_fd0_0_c0_c0'>&#xE794;</text>
				</view>
				<view class='flex flex-wrap align-stretch justify-center'>
					<text class='platformMessage_fd0_0_c1_c0'>练后检测</text>
				</view>
				<view class='flex flex-wrap align-center platformMessage_fd0_0_c0'></view>
			</view>

		</view>
		<view :style="{height: (64+StatusBarRpx)+'rpx'}"></view>

		<view class="loading_css" v-if="isShow">
			<uv-loading-icon size="24" mode="circle" color="#4087FD" :show="true"></uv-loading-icon>
			<view>加载中</view>
		</view>
		<template v-else>
			<view class="time_info">
				<text>{{audioInfo.audio_text}}</text>
				<uv-count-down :time="(audioInfo.time / 60) * 60 * 1000" format="mm:ss" @finish="timeFinish"></uv-count-down>
			</view>

			<!-- <image class="item_num_img" :src='STATIC_URL+"30.png"' mode=""></image> -->
			<view class="list" v-if="list.length > 0">
				<view class="list_item" v-for="(item,index) in list" :key="index">
					<view class="item_left" @tap.stop="clickWord(index)">
						<view v-if="item.clickNum == 0">
							<rich-text :nodes="fileText(item.word, item.syllable)"></rich-text>
						</view>
						<view v-if="item.clickNum == 1 || item.clickNum == 2" class="active_item_text">
							<rich-text :nodes="fileText(item.word, item.syllable)"></rich-text>
						</view>
						<!-- <image v-if="item.clickNum == 1" class="see_img" :src='STATIC_URL+"40.png"' mode="aspectFill">
						</image> -->
						<view v-if="item.clickNum == 3" class="item_hide">
							<rich-text :nodes="fileText(item.word, item.syllable)"></rich-text>
						</view>
						<view v-if="item.clickNum == 2" class="item_tips">{{item.c_word}}</view>
					</view>
					<view class="item_right">
						<view class="see_right_item" @tap.stop="selectAnswer(index, 1)">
							<image v-if="item.is_meet == 1" :src='STATIC_URL+"10.png"' mode=""></image>
							<image v-else :src='STATIC_URL+"11.png"' mode=""></image>
							<text>会</text>
						</view>
						<view class="see_right_item" @tap.stop="selectAnswer(index, 2)">
							<image v-if="item.is_meet == 2" :src='STATIC_URL+"37.png"' mode=""></image>
							<image v-else :src='STATIC_URL+"11.png"' mode=""></image>
							<text>不会</text>
						</view>
					</view>
				</view>
			</view>
			<view class="noData" v-if="list.length == 0 && !isShow">
				<image :src='STATIC_URL+"no.png"'></image>
			</view>

			<view class="bottom_info">
				<view class="bottom_info_left">
					总数{{totalNum}}
					<text class="bottom_info_left_line">l</text>
					错误{{notNum}}
					<text class="bottom_info_left_line">l</text>
					正确率{{accuracy}}%
				</view>
				<view class="bottom_info_right" @tap.stop="submitWord">
					提交
				</view>
			</view>
			<view style="height: 120rpx;"></view>
		</template>

		<uv-modal width="300rpx" :showCancelButton="true" :closeOnClickOverlay="false" confirmColor="#4087FD"
			ref="modal" title="提示" :content='content' align="center" :textStyle="{fontSize: 20 + 'px'}"
			@confirm="confirm"></uv-modal>

		<overlay ref="tips" :tips="tips"></overlay>
	</view>
</template>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'
	import overlay from "@/components/overlay/overlay.vue"
	import {highlightedText} from "@/common/utils/utils.js"
	export default {
		components: {
			overlay
		},
		data() {
			return {
				"tips": "单词还没检查完不能提交哦！",
				"content": "是否放弃练后检测？",
				"record_id": "7", // 标记记录id

				"one_index": -1,
				"list": [],
				"page": 1,
				"is_pull": true,
				"last_page": 1,
				"status": 'loadmore',
				"loadingText": '努力加载中',
				"loadmoreText": '轻轻上拉',
				"nomoreText": '没有更多了',
				"isShow": true,
				"is_answer": 1,
				"languageType": 1,
				"wordlist_info": [],
				"innerAudioContext": null,
				"totalNum": 0, // 全部数量
				"notNum": 0, // 错误数量
				"meetNum": 0, // 正确数量
				"accuracy": 0,
				
				"audioInfo": {
					"audio": {}
				},  // 页面标题音频
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},

		},
		watch: {
			meetNum() {
				this.accuracy = ((this.meetNum / this.totalNum) * 100).toFixed(0);
			}
		},
		onLoad(options) {
			let {
				record_id
			} = options;
			if (record_id !== undefined) this.record_id = record_id;
			this.getList();
			this.getAudio();
		},
		onUnload() {

		},
		onReady() {
			// this.$refs.tips.open();
			this.innerAudioContext = uni.createInnerAudioContext();
		},
		onShow() {
			this.languageType = uni.getStorageSync('languageType');
		},
		onHide() {

		},
		onResize() {

		},
		// 下拉刷新
		onPullDownRefresh() {

		},
		// 上拉加载
		onReachBottom() {

		},
		onPageScroll(e) {

		},
		methods: {
			fileText(text, syllable) {
				return highlightedText(text, syllable);
			},
			// 获取录音配置  post65969da949442
			getAudio() {
				this.$api.post(global.apiUrls.post65969da949442, {
					
				}).then(res => {
					if (res.data.code == 1) {
						this.audioInfo = res.data.data[2];
						if (this.innerAudioContext) {
							this.innerAudioContext.destroy();
						}
						this.innerAudioContext = null;
						this.innerAudioContext = uni.createInnerAudioContext();
						this.innerAudioContext.autoplay = true;
						this.innerAudioContext.src = this.audioInfo.audio.path;
						
						this.innerAudioContext.onPlay(() => {
							console.log('开始播放');
						});
						this.innerAudioContext.onError((res) => {
							this.$message.info('播放失败，请重试');
						});
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			//获取列表
			getList() {
				this.$api.post(global.apiUrls.post65659230d48e5, {
					aid: this.record_id,
				}).then(res => {
					// console.log(res);
					uni.stopPullDownRefresh();
					this.isShow = false;
					if (res.data.code == 1) {
						this.list = res.data.data;
						this.totalNum = this.list.length;
						if (this.list.length > 0) {
							this.list.forEach((v, k) => {
								v.clickNum = 0;
								v.is_meet = 0;
							})
						}
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			selectAnswer(index, type) {
				this.list[index].is_meet = type;
				this.meetNum = this.list.filter(u => u.is_meet == 1).length;
				this.notNum = this.list.filter(u => u.is_meet == 2).length;
				this.$forceUpdate();
			},
			// 单词点击次数
			clickWord(index) {
				if (this.one_index == index) {
					if (this.list[index].clickNum == 3) {
						this.list[index].clickNum = 1;
					} else {
						this.list[index].clickNum += 1;
					}
					this.one_index = index;
				} else {
					this.list.forEach((v, k) => {
						v.clickNum = 0
					})
					this.list[index].clickNum += 1;
					this.one_index = index;
				}
				
				if (this.innerAudioContext) {
					this.innerAudioContext.destroy();
				}
				this.innerAudioContext = null;
				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.autoplay = true;
				if (this.languageType == 1) {
					this.innerAudioContext.src = this.list[index].american_accent;
				} else {
					this.innerAudioContext.src = this.list[index].british_accent;
				}
				
				this.innerAudioContext.onPlay(() => {
					console.log('开始播放');
				});
				this.innerAudioContext.onError((res) => {
					this.list[index].clickNum = 0;
					this.$message.info('播放失败，请重试');
					console.log(res.errMsg);
					console.log(res.errCode);
				});
				this.$forceUpdate();
			},
			submitWord() {
				let index = 0;
				index = this.list.filter(u => u.is_meet == 0).length;
				if (index > 0) {
					this.$refs.tips.open();
					return;
				}
				this.list.forEach((v, k) => {
					this.wordlist_info.push({
						wordlist_id: v.aid,
						is_meet: v.is_meet
					})
				})

				this.$api.post(global.apiUrls.post6565ba0a1c6f2, {
					record_id: this.record_id,
					wordlist_info: JSON.stringify(this.wordlist_info)
				}).then(res => {
					// console.log(res);
					if (res.data.code == 1) {
						this.tips = '恭喜您完成本次训练';
						this.$refs.tips.open();
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 1000)
					} else if (res.data.code == 0) {
						this.$message.info(res.data.msg);
					}
				})
			},
			// 倒计时结束
			timeFinish() {
				this.list.forEach((v, k) => {
					this.wordlist_info.push({
						wordlist_id: v.aid,
						is_meet: v.is_meet == 0 ? 2 : v.is_meet
					})
				})
				this.$api.post(global.apiUrls.post6565ba0a1c6f2, {
					record_id: this.record_id,
					wordlist_info: JSON.stringify(this.wordlist_info)
				}).then(res => {
					// console.log(res);
					if (res.data.code == 1) {
						this.tips = '已完成本次训练';
						this.$refs.tips.open();
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 1000)
					} else if (res.data.code == 0) {
						this.$message.info(res.data.msg);
					}
				})
			},
			openModel(type) {
				this.$refs.modal.open();
			},
			confirm() {
				this.$refs.modal.close();
				uni.navigateBack({
					delta: 1
				})
			},
		}
	};
</script>
<style lang="scss" scoped>
	.bottom_info {
		background: rgba(248, 248, 248, 1);
		width: 100%;
		position: fixed;
		bottom: 0;
		padding: 0 25rpx 35rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.bottom_info_left {
			font-size: 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #333333;

			.bottom_info_left_line {
				color: #DDDDDD;
				margin: 0 14rpx;
			}
		}

		.bottom_info_right {
			width: 175rpx;
			height: 68rpx;
			line-height: 68rpx;
			text-align: center;
			background: #4087FD;
			border-radius: 34rpx;

			font-size: 25rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}

	.time_info {
		width: 100%;
		height: 50rpx;
		background: #FA3B3D;
		font-size: 15rpx;
		font-weight: bold;
		line-height: 50rpx;
		color: #fff;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;

		/deep/.uv-count-down__text {
			color: #fff !important;
			font-size: 15rpx !important;
		}
	}

	.list {
		margin: 15rpx 25rpx;
		background: #fff;
		border-radius: 10rpx;
		padding: 0 20rpx 25rpx;

		.list_item {
			padding: 25rpx 0;
			border-bottom: 1px solid #dddddd;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.item_left {
				font-size: 28rpx;
				// font-family: PingFang SC, PingFang SC;
				// font-weight: bold;
				color: #333333;
				display: flex;
				align-items: center;
				width: 70%;

				.active_item_text {
					// color: #4087FD;
					font-weight: 700;
				}

				.item_tips {
					font-size: 24rpx;
					font-weight: 500;
					// color: #999;
					color: #333;
					margin-left: 90rpx;
				}

				.item_hide {
					opacity: 0;
				}
				.see_img {
					width: 25rpx;
					height: 25rpx;
					margin-left: 13rpx;
				}
			}

			.item_right {
				display: flex;
				flex-wrap: wrap;
				justify-self: self-end;
				width: 30%;

				.see_right_item {
					display: flex;
					align-items: center;
					font-size: 18rpx;
					color: #333;
					margin-left: 40rpx;

					image {
						width: 23rpx;
						height: 23rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
	}

	.tabs {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 135rpx;

		.tabs_item {
			font-size: 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #333333;
			padding: 20rpx 0;
			position: relative;
		}

		.active_item {
			color: #4087FD;
			font-weight: bold;
		}

		.tabs_line {
			display: inline-block;
			width: 31rpx;
			height: 5rpx;
			background: #4087FD;
			border-radius: 6rpx;
			position: absolute;
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
		}
	}

	.content_img {
		width: 100%;
		height: 219rpx;
		margin-top: 20rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
	}

	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: rgba(248, 248, 248, 1);
		background-size: 100% auto !important;
	}

	.platformMessage_flex_0 {
		background: #fff;
		width: 100%;
		height: 64rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.platformMessage_fd0_0_c1_c0 {
		font-size: 25rpx;
		font-weight: 500;
		color: #333333;
		line-height: 64rpx;
	}

	.platformMessage_fd0_0_c0_c0 {
		font-size: 25rpx;
		color: #333;
	}

	.platformMessage_fd0_0_c0 {
		width: 50rpx;
		height: 50rpx;
	}

	.platformMessage_fd0_0 {
		padding: 0rpx 25rpx 0rpx 25rpx;
	}

	.platformMessage_flex_1 {
		// margin: 16rpx 25rpx 16rpx 25rpx;
		// background: #fff;
		// border-radius: 10rpx;
	}

	.platformMessage_fd1_0_c2 {
		font-size: 18rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 25rpx;
	}

	.platformMessage_fd1_0_c1 {
		margin: 10rpx 0rpx 0rpx 0rpx;
		font-size: 18rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 26rpx;
		// -webkit-line-clamp: 2;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// display: -webkit-box;
		// -webkit-box-orient: vertical;
	}

	.platformMessage_fd1_0_c0 {
		font-size: 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #333333;
		// line-height: 45rpx;
		// -webkit-line-clamp: 1;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// display: -webkit-box;
		// -webkit-box-orient: vertical;
	}

	.platformMessage_fd1_0 {
		// background: #fff;
		width: 100%;
		padding: 20rpx 25rpx 20rpx 25rpx;
		border-bottom: 1px solid #eee;
	}
</style>